<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<!-- 移动端的浏览 -->
		<meta name="viewport" content="device-width,initial-scale=1.0">
		<title>分类页面</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../css/me.css"/>
		<link rel="stylesheet" href="../lib/editormd/css/editormd.css"/>
	</head>
	<body>
		<!-- 导航 -->
		<!-- 在移动端隐藏 -->
		<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
			<div id="ui container">
				<!-- stackable 表示可以堆叠的 -->
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">管理后台</h2>
					<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>  首页</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
					<div class="right m-item menu m-mobile-hide">
						<di class="ui  item dropdown">
							<div class="text">
							      <img class="ui avatar image" src="https://picsum.photos/id/1003/100/100">
									张三
							</div>
							<i class="dropdown icon"></i>
							<div class=" menu">
								<a href="#" class="item">注销</a>
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu-toggle black button m-top-right m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
			
			
		</nav>
		
		
			<div class="ui attached pointing menu">
				<div class="ui container">
					<div class="right menu">
								<a href="#" class="active teal item">发布</a>
								<a href="#" class=" item">列表</a>
					</div>
			
				</div>

			
			</div>

		
		<!-- 中间部分 -->
		<div class="m-container-small m-padded-tb-big">
			
			<div class="ui container">
				<form action="#" method="post" class="ui form">
					
					<div class="required field">						
						<div class="ui labeled input">
							<div class="ui teal basic selection compact dropdown label">
								<input type="hidden" name="title" id="" class="原创" />
								<i class="dropdown icon"></i>
								<div class="default text">
									原创
								</div>
								<div class="menu">
									<div class="item" data-value="原创">
										原创
									</div>
									<div class="item" data-value="转载">
										转载
									</div>
									<div class="item" data-value="翻译">
										翻译
									</div>
									
								</div>
							</div>
							<input type="text" name="title" placeholder="标题" />
						</div>						
					</div>
					
					<div class="field">
						<div id="md-content" style="z-index:1 !important;">
							<textarea style="display:none;">[TOC]

							</textarea>
						</div>
						
					</div>
					<div class="two fields">
						<div class="field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">分类</label>
								<div class="ui selection dropdown fluid">
									<input type="hidden" name="type"/>
									<i class="dropdown icon"></i>
									<div class="default text">分类</div>
									<div class="menu">
										<div class="item" data-value="1">错误日志</div>
										<div class="item" data-value="2">开发者日志</div>
									</div>
								</div>
								
							</div>
						</div>
						<div class="field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">标签</label>
								<div class="ui selection multiple search dropdown fluid">
									<input type="hidden" name="tag"/>
									<i class="dropdown icon"></i>
									<div class="default text">标签</div>
									<div class="menu">
										<div class="item" data-value="1">java</div>
										<div class="item" data-value="2">javascript</div>
									</div>
								</div>
								
							</div>
						</div>
					</div>
					
					<div class="field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">首图</label>
							<input type="text" name="indexPicture" placeholder="首图引用地址"/>
						</div>
					</div>
					<div class="inline fields">
						<div class="field">
								<div class="ui checkbox">
									<input type="checkbox" id="recommend" name="recommend" checked class="hidden">
									<!-- 与recommend关联 -->
									<label for="recommend">推荐</label>
								</div>
						</div>
						
						<div class="field">
								<div class="ui checkbox">
									<input type="checkbox" id="shareInfo" name="shareInfo" class="hidden">
									<!-- 与recommend关联 -->
									<label for="shareInfo">转载声明</label>
								</div>
						</div>
						
						<div class="field">
								<div class="ui checkbox">
									<input type="checkbox" id="appreciation" name="appreciation" class="hidden">
									<!-- 与recommend关联 -->
									<label for="appreciation">赞赏</label>
								</div>
						</div>
						
						<div class="field">
								<div class="ui checkbox">
									<input type="checkbox" id="comment" name="comment" class="hidden">
									<!-- 与recommend关联 -->
									<label for="comment">评论</label>
								</div>
						</div>
						
						<div class="field">
								<div class="ui checkbox">
									<input type="checkbox" id="recommend" name="recommend" class="hidden">
									<!-- 与recommend关联 -->
									<label for="recommend">推荐</label>
								</div>
						</div>
					</div>
					<div class="ui error message">
						
					</div>
					<div class="ui right aligned container">
						<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>
						<button  class="ui secondary button">保存</button>
						<button  class="ui teal button">发布</button>
					</div>
				
					
				</form>
				
			
			</div>
		
		</div>
	
		<!-- 底部footer -->
		<footer class="ui inverted  segment m-padd-tb-massive" >
			
			<div class="ui container center aligned">
				<!-- divided 分割线 -->
				<div class="ui inverted divided stackable grid">
		
					<div class="three wide column">
						<div class="ui inverted link list">
							<img src="../img/1.png" class="ui rounded centered image m-imagesize"/>
						</div>		
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事{}</a>
							<a href="#" class="item">用户故事{}</a>
							<a href="#" class="item">用户故事{}</a>
							<a href="#" class="item">用户故事{}</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事{}</a>
							<a href="#" class="item">用户故事{}</a>
				
						</div>		
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<p class="m-opacity-mini">这是我的第一个博客</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-mini">Copyright  版权所有  工信部备案豫ICP备052483号 公安机关备案4101020100号</p>	
			</div>
			
		</footer>


		<th:block th:replace="admin/_fragments :: script">
			<script src="../js/jquery-3.6.0.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
			<script src="../lib/editormd/editormd.min.js"></script>
		</th:block>
		<script>
			$('.menu-toggle').click(function(){
				// 有就移除 没有就添加
				$('.m-item').toggleClass('m-mobile-hide');
			});
			
			$('.ui.dropdown').dropdown({
				on: "hover"
			});
			
			
			// 表单验证
			$(".ui.form").form({
				fields: {
					title:{
						identifier:"title",
						rules:[{
							type:"empty",
							prompt:"标题：请输入博客标题"
						}]
					}
				}
			});
			// 初始化markdown编辑器
			var contentEditor;
            $(function() {
                contentEditor = editormd("md-content", {
                    width   : "100%",
                    height  : 640,
                    syncScrolling : "single",
                    path    : "../lib/editormd/lib/"
                });
                
                /*
                // or
                testEditor = editormd({
                    id      : "test-editormd",
                    width   : "90%",
                    height  : 640,
                    path    : "../lib/"
                });
                */
            });
					
		</script>
	
	</body>
</html>
